<template>
    <el-container style="height: 100%;">
        <EditorThemeSide></EditorThemeSide>

        <el-main class="theme-main-wrapper">
            <div class="theme-main">
                <el-tabs v-model="viewModel" @tab-click="setViewModel">
                    <el-tab-pane name="mobile">
                        <span slot="label"><i class="btn-icon icon-mobile"></i> 手 机</span>
                    </el-tab-pane>
                    <el-tab-pane name="pc">
                        <span slot="label"><i class="btn-icon icon-pc"></i> 电 脑</span>
                    </el-tab-pane>
                </el-tabs>

                <div class="theme-view-wrapper">
                    <div class="theme-view" :class="viewModel">
                        <!-- 标题 -->
                        <div class="theme-view-head">
                            <div class="theme-view-title">测评标题</div>
                            <div class="theme-view-desc">感谢您能抽出几分钟时间来参加本次答题，现在我们就马上开始吧！</div>
                        </div>

                        <!-- 自定义表单主体 -->
                        <div>
                            <fm-generate-form v-if="jsonData" :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm"></fm-generate-form>
                        </div>

                        <!-- 按钮组 -->
                        <div class="theme-view-btns">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-button style="width: 100%">上一步</el-button>
                                </el-col>
                                <el-col :span="12">
                                    <el-button style="width: 100%">下一步</el-button>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="24">
                                  <el-button  style="width: 100%">提交</el-button>
                                </el-col>
                            </el-row>
                        </div>

                        <!-- 底部 版权、支持等等 -->
                        <div class="theme-view-foot">
                            技术支持 爱眼集团-智慧医院项目部
                        </div>
                    </div>
                </div>
            </div>
        </el-main>

        <EditorThemeSetting></EditorThemeSetting>
    </el-container>
</template>

<script>
import FormFooter from "../../components/FormMaking/FormLayout/FormFooter";
import EditorThemeSide from "./EditorThemeSide";
import editor from "../../assets/config/editor";
import EditorThemeSetting from "./EditorThemeSetting";


export default {
    name: "FormTheme",
    components: {
      EditorThemeSetting,
        EditorThemeSide,
        FormFooter,
    },
    data(){
        return {
            viewModel : 'mobile',
            jsonData: {},
            editData: {},
            remoteFuncs: {

            }
        }
    },
    methods:{
        setViewModel(){
            let model = this.viewModel;

            this.viewModel = model;
        }
    },
    created() {
        console.log('加载 主题');
        let jsonData = editor.getCurrentData();

        this.jsonData = jsonData;
    }
}
</script>

<style lang="scss">
  @import "../../assets/theme";

  $tools-height : 56px;

  .theme-main-wrapper{
      padding: 0 !important;
  }

  .theme-main{
      .theme-view-wrapper{
          height: calc(100vh - #{$head-height} - #{$tools-height});
          width: 100%;
          display: flex;
          justify-items: center;
          justify-content: center;
          align-items: center;

          .theme-view{
              background: #ffffff;
              overflow-y: auto;
              border: 1px  dotted #999999;
              padding: 0;

              &.mobile{
                  width: 318px;
                  height: 568px;
              }

              &.pc{
                  width: 660px;
                  height: inherit;
              }
          }
      }

      .el-tabs__header{
          background: #ffffff;

          .el-tabs__nav-scroll{
            width: 200px !important;
            margin: 0 auto !important;
          }
      }
  }
</style>